<template>
  <!-- fixed app-->
  <div class="app_img_frame" :style="file_style" v-show="file" @dblclick="handleClick" @mouseenter="file_hover"
    @mouseleave="file_out" @mousedown="handleDown">

    <el-image :src="imgUrl" class="el-image-hop" draggable="false"></el-image>
    <p @dblclick.stop="foucsInput" v-show="!input_show"
      style="text-align: center;font-size: medium;color: aliceblue;width: 80%;margin-left:10%;font-size: small;">
      {{ file_name }}</p>
    <el-input @keydown.native.enter="saveFile" size="mini" @blur="saveFile" style="width:100%" ref="file_input"
      v-show="input_show" v-model="fileName" />
  </div>
</template>
  
<script>
import draggable from "vuedraggable";
import { mapState, mapActions } from 'vuex';
export default {
  name: "FileItem",
  data() {
    return {
      input_show: false,
      isUse: false,
      sourceFileName: this.file ? this.file.fileName : ''
    }
  },
  props: {
    file: {
      required: true
    },
    mouse: {
      type: Object,
      requierd: true
    }
  },
  mounted() {
    if (this.file) this.$pubsub.subscribe(`focusname:${this.file.x}-${this.file.y}`, this.foucs)
  },
  components: {
    draggable
  },
  beforeDestroy() {
    if (this.file) this.$pubsub.unsubscribe(`focusname:${this.file.x}-${this.file.y}`)
  },
  watch: {
    file(newval, oldval) {
      if (newval && oldval == null) {
        this.$pubsub.subscribe(`focusname:${this.file.x}-${this.file.y}`, this.foucs)
      }
    },
    list(newval) {

    }
  },
  computed: {
    ...mapState('appAbout', ['apps']),
    ...mapState('userAbout', ['token']),
    imgUrl() {
      if (this.file == null || this.file == undefined) return ''
      if (this.file.fileType == 0) {
        return '../assets/folder-manager.png'
      } else {
        if (/\.java$/.test(this.file.fileName)) {
          return '../assets/code_java.png'
        } else if (/\.py$/.test(this.file.fileName)) {
          return '../assets/code_py.png'
        } else if (/\.cpp$/.test(this.file.fileName)) {
          return '../assets/code_cpp.png'
        } else if (/\.c$/.test(this.file.fileName)) {
          return '../assets/code_c.png'
        } else if (/\.js$/.test(this.file.fileName)) {
          return '../assets/code_js.png'
        } else if (/\.md$/.test(this.file.fileName)) {
          return '../assets/file_md.png'
        } else if (/\.pdf$/.test(this.file.fileName)) {
          return '../assets/file_pdf.png'
        }
        else {
          return '../assets/file_other.png'
        }
      }
    },
    file_name() {
      if (this.file) {
        if (this.file.fileName.length <= 12) return this.file.fileName
        return this.file.fileName.substring(0, 9) + '...'
      }
      return ''
    }
    ,
    app_id() {
      if (this.file == null || this.file == undefined) return ''
      if (this.file.fileType == 0) {
        return 'folder-manager'
      } else {
        if (/\.md$/.test(this.file.fileName)) {
          return 'markdown-editor'
        } else if (/\.pdf$/.test(this.file.fileName)) {
          return 'pdf-viewer'
        }
        return 'text-editor'
      }
    },
    fileName: {
      get() {
        if (this.file) return this.file.fileName
      },
      set(val) {
        if (this.file) this.file.fileName = val
      }
    },
    file_style() {
      if (this.file && this.file === this.mouse.file && !this.mouse.is_up) {
        return { position: 'relative', left: `${this.left}px`, top: `${this.top}px`, zIndex: 100 }
      } else {
        return { position: 'relative', left: "0px", top: "0px" }
      }
    },
    left() {
      //console.log(this.mouse.x-this.mouse.down_x)
      return this.mouse.x - this.mouse.down_x
    },
    top() {
      return this.mouse.y - this.mouse.down_y
    }
  }
  ,
  methods: {
    ...mapActions('appAbout', ['openAppWithData']),
    handleClick() {
      // console.log(this.file)
      const file = this.file
      if (this.file) this.openAppWithData({ app_id: this.app_id, meta: { file } })
    },
    foucsInput() {
      this.input_show = true
      this.$nextTick(() => { this.$refs.file_input.focus(); this.$refs.file_input.select() })
    },
    saveFile() {
      // 这里做更新文件名
      if (this.isUse) return
      this.isUse = true
      // 进行文件名更改
      this.$basicAxios(this.$ms.saveFileNameById(this.file.fileId, this.fileName, this.token), () => {
        this.sourceFileName = this.file.fileName
      }, () => {
        this.notify("error", resp.data.msg);
        this.file.fileName = this.sourceFileName
      }).then(() => { this.isUse = false; })
      this.input_show = false
    },
    file_hover() {
      if (this.file) this.$pubsub.publish('update_hover_file', this.file)
    },
    file_out() {
      if (this.file) this.$pubsub.publish('update_hover_file', null)
    },
    handleDown() {
      //开启定位模式
      if (this.file) this.mouse.file = this.file
    }
  },
};
</script>
  
<style scoped lang="less">
.el-image-hop {
  width: 65%;
  height: calc(calc(1vh / 1vw) * 0.65);
  margin-left: 20%;
  margin-top: 10%;
}

.app_actived:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  height: 2px;
  width: 100%;
  background-color: #ccc;
}

/deep/.ivu-dropdown {
  height: 100%;
}

.app_img_frame {
  width: 90%;
  height: 90%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 5%;
  cursor: default;
  user-select: none;
}

.app_img_frame:hover {
  backdrop-filter: blur(1000000px);
  /* 模糊半径 */
  border: 1px #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

/deep/.ivu-dropdown-rel {
  height: 100%;
  width: 100%
}
</style>